<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抄送给我的</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">

    <el-select v-model="query.tid" placeholder="请选择申请类型" clearable>
        <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
        </el-option>
    </el-select>
    <el-input v-model="query.uname" style="width:200px;" clearable placeholder="申请人"></el-input>
    <el-date-picker
            v-model="query.startTime"
            type="date"
            placeholder="选择日期1">
    </el-date-picker>-
    <el-date-picker
            v-model="query.endTime"
            type="date"
            placeholder="选择日期2">
    </el-date-picker>





    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="uname"
                label="申请人">
        </el-table-column>
        <el-table-column
                prop="tname"
                label="申请类型">
        </el-table-column>
        <el-table-column
                prop="intro"
                label="申请原因">
        </el-table-column>
        <el-table-column
                label="开始时间">
            <template slot-scope="scope">
                {{scope.row.startTime|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                label="结束时间">
            <template slot-scope="scope">
                {{scope.row.endTime|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                prop="adminName"
                label="审批人">
        </el-table-column>
        <el-table-column
                prop="copyName"
                label="抄送人">
        </el-table-column>
        <el-table-column
                prop="state"
                label="当前状态">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button type="primary" @click="detail(scope.row.id)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="80%" top="5px">


        <el-table
                :data="tableDataDialog"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="uname"
                    label="申请人">
            </el-table-column>
            <el-table-column
                    prop="tname"
                    label="申请类型">
            </el-table-column>
            <el-table-column
                    prop="intro"
                    label="申请原因">
            </el-table-column>
            <el-table-column
                    label="时间">
                <template slot-scope="scope">
                    {{scope.row.createTime|format('yyyy-MM-dd hh:mm:ss')}}
                </template>
            </el-table-column>

            <el-table-column
                    prop="adminName"
                    label="审批人">
            </el-table-column>
            <el-table-column
                    prop="nextAdminName"
                    label="下一审批人">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="当前状态">
            </el-table-column>
        </el-table>



    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            total:0,
            query:{
                copyUid:"",
                uname:"",
                tid:"",
                startTime:"",
                endTime:"",
                state:"",
                page:1,
                pageSize:2
            },

            user:{},
            typeList:[],

            tableDataDialog:[],
            dialogFormVisible: false,

        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            detail(aid){
                axios.post(`/apply-operate-record/findDetailList?aid=${aid}`).then(res=>{
                    this.tableDataDialog = res.data;

                    this.dialogFormVisible = true;
                })

            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },

            initData(){
                axios.post(`/apply/findPage4Copy?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })

            },

            initTypeData(){
                axios.post("/type/findAll").then(res=>{
                    this.typeList = res.data;
                })
            }

        },
        created(){


            let user = localStorage.getItem("user_shenpi_07");//字符串
            //1、登录验证
            //2、权限验证
            if(user){//登录过了
                user = JSON.parse(user);

                if(user.role=="HR"){//有权操作当前页面

                    this.initTypeData()
                    this.user = user;
                    this.query.copyUid = this.user.id;
                    this.initData()
                }else{//无权操作当前页面，提示并跳转登录页面
                    this.$message.error("你不是HR，无权操作当前页面，请重新登录，即将跳转")
                    //延迟操作
                    setTimeout(()=>{
                        location.href = "/login.html"
                    },2000)
                }
            }else{//没有登录，提示并跳转登录页面
                this.$message.error("你还没有登录，请先登录，即将跳转")
                setTimeout(()=>{
                    location.href = "/login.html"
                },2000)
            }

        }
    })
</script>

</body>
</html>
